<script setup lang='ts'>
  import type {BannerItem} from '@/types/home'
  import {ref} from 'vue'
  const activeIndex = ref(0)
  // // swiper 下标发生变化时触发
  const onChange: UniHelper.SwiperOnChange = (e) =>{
    // ! 非空断言，主观上排除空值的情况
    activeIndex.value = e.detail!.current
  }
  // // 定义 props 接受父级数据
  defineProps<{
    list:BannerItem[]
  }>()
</script>

<template>
	<view class="carousel">
      <swiper  :autoplay="true" :interval="3000" :duration="1000" @change="onChange">
        <swiper-item v-for="(item,index) in list" :key="index">
          <navigator url="/src/pages/index/index" hover-class="none" class="navigator">
            <img mode="aspecFill" class="image" :src="item.imgUrl" alt="" />
          </navigator>
        </swiper-item>
      </swiper>

      <view class="indicator">
        <text v-for="(item,index) in list" :key="item.id" class="dot" :class="{active:index == activeIndex}"></text>
      </view>
	</view>
</template>

<style lang="scss">
/* 轮播图 */
.carousel {
  height: 280rpx;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;
    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .active {
      background-color: #fff;
    }
  }
  .navigator,
  .image {
    width: 100%;
    height: 100%;
  }
}
</style>
